<template>
	<div class="">
		<sports-single-nav :sportId="sportId" />
		<router-view></router-view>
	</div>
</template>

<script lang="ts" setup>
import SportsSingleNav from './sports-single-nav.vue'
import { SportsType } from '@/enums'
import { useRoute } from 'vue-router'
import { getSportsTypeByCode } from '@/utils'
import { ref, watch, provide, Ref } from 'vue'

const route = useRoute()

const sportId = ref<SportsType>()

provide<Ref<SportsType | undefined>>('sportId', sportId)

watch(
	() => route.params.id,
	() => {
		sportId.value = getSportsTypeByCode(route.params.id as string)
	},
	{
		immediate: true
	}
)
</script>
